<template>
  <div v-show="loginVisible" class="login-wrap">
    <el-row>
      <el-col :span="8">
        <div class="login_adv" :style="{backgroundImage: 'url(' + Bg2 + ')' }">
          <div class="login_adv__title"></div>
          <div class="login_adv__mask">
<!--            <p class="p-h2">spurs-vue3-electorn</p>-->
<!--            <p class="title-con">Vite+Vue3+Ts+Electorn构建企业级后台桌面应用</p>-->
          </div>
          <div class="login_adv__bottom">

            <p class="title-bot">©spurs1.1.0</p>
          </div>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="login-form">
          <div @click="closeWin" class="login-close">
            <el-icon><Close style="cursor: pointer" /></el-icon>
          </div>
          <div class="login-tit">
            <img alt="Spurs-Admin" :src="LogoImg">
            <label data-v-445e96e8="">spurs-vue3-electorn</label>
          </div>
          <el-form
              ref="ruleFormRef"
              :model="ruleForm"
              :rules="rules"
              label-width="0px"
              class="demo-ruleForm"
              size="large"
          >
            <el-form-item prop="loginName">
              <el-input size="large" :prefix-icon="User" placeholder="账号" v-model="ruleForm.loginName"/>
            </el-form-item>
            <el-form-item style="position: relative" prop="password">
              <el-input :type="passwordType" size="large" placeholder="密码"
                        @keyup.enter.native="submitForm(ruleFormRef)" :prefix-icon="Lock" v-model="ruleForm.password"/>
              <span class="show-pwd" @click="showPwd()">
                <el-icon v-if="passwordType=='password'"><Hide/></el-icon>
                <el-icon v-else><View/></el-icon>
              </span>
            </el-form-item>
            <el-form-item>
              <el-button v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="登录中..." :loading="state.loading" style="width: 100%" type="primary" @click="submitForm(ruleFormRef)">
                登 录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>

  </div>
</template>
<script setup lang="ts">
import {reactive, ref} from 'vue'
import {Lock, User} from '@element-plus/icons-vue'
import type {FormInstance, FormRules} from 'element-plus'
import Bg2 from '@/assets/logn-bg.jpg'
import LogoImg from '@/assets/logo.png'
import {useUserStore} from '@/store/user'
import {useRouter} from 'vue-router'
const { ipcRenderer } = require('electron');

const router = useRouter()
// reactive 函数通常定义：复杂类型的响应式数据
// reactive 可以转换对象成为响应式数据对象，但是不支持简单数据类型。
// ref 可以转换简单数据类型为响应式数据对象，也支持复杂数据类型，但是操作的时候需要 .value 。
// 它们各有特点，现在也没有最佳实践，没有明显的界限，所有大家可以自由选择。
// 如果能确定数据是对象且字段名称也确定，可使用 reactive 转成响应式数据，其他一概使用 ref 。这样就没有 心智负担 。
const ruleFormRef = ref<FormInstance>()
const loginVisible = ref(true)
const fullscreenLoading = ref(false)
const state = reactive({
  loading: false
})
const passwordType = ref("password")
const ruleForm = ref({
  loginName: '',
  password: '',
})
const rules = reactive<FormRules>({
  loginName: [
    {required: true, message: '请输入登录账号', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '密码不能为空', trigger: 'blur'}
  ],
})
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return

  await formEl.validate(async (valid) => {
    if (valid) {
      loginVisible.value = false
      fullscreenLoading.value = true
      state.loading = true;
      const userStore = useUserStore()
      const result: any = await userStore.userLogin(ruleForm.value)
      if (result.httpCode == 200) {
        ipcRenderer.send('showMainWindow');
        setTimeout(() => {
          fullscreenLoading.value = false
        }, 1000)
        router.push('/dashboard')
      }
      state.loading = false;
    } else {
      state.loading = false;
    }
  })
}
const showPwd = () => {
  if (passwordType.value === 'password') {
    passwordType.value = ''
  } else {
    passwordType.value = 'password'
  }
}
const closeWin = () =>{
  ipcRenderer.send("window-close") // 通知主进程 关闭
}
</script>
<style scoped>
.login-wrap {
  width: 100%;
  height: 430px;
  -webkit-app-region: drag;
  background: #f6f7f8;
}

.login-form {
  width: 300px;
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
  margin-top: 100px;
  -webkit-app-region: no-drag;
}

.login-tit {
  width: 100%;
  text-align: left;
  font-size: 18px;
  margin-bottom: 15px;
}

.login_adv {
  width: 100%;
  height: 430px;
  background-color: #555;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}

.login-tit img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  vertical-align:middle;
}

.show-pwd {
  position: absolute;
  right: 10px;
  top: 3px;
  cursor: pointer;
  color: #889aa4;
}

.login_adv__mask {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.login_adv__title {
  color: #fff;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 2;
}

.p-h2 {
  font-size: 16px;
  color: #D4D7DE;
  margin-left: 15px;
  margin-top: 15px;

}

.title-con {
  margin-left: 15px;
  margin-top: 0px;
  font-size: 12px;
  padding-right: 15px;
  color: #CDD0D6
}

.login_adv__bottom {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  color: #fff;
  background-image: linear-gradient(transparent, #000);
  z-index: 3;
}
.title-bot{
  font-size: 12px;
  color: #CDD0D6;
  margin-left: 15px;
  padding-bottom: 15px;
}
.login-close{
  position: absolute;
  top: 10px;
  right: 5px;
  z-index: 99;
  width: 40px;
  height: 40px;
  cursor: pointer;
  text-align: center;
  cursor: pointer;
  -webkit-app-region: no-drag;
}
</style>
